<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:include="common">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    查看订单详细
                </h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form" id="myForm">
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">支付宝交易号</label>
                        <div class="col-sm-10">
                            <input type="hidden" class="form-control" name="id" >
                            <input type="text" class="form-control" name="orderNum" >
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">数量</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="shopCount">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">实际总价格</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="realityShopTotal">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="buyUserName">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">观演人</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="contacts">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">观演人证件类型</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="papersType">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">观演人证件号</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="papersNumber">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">下单时间</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="orderDate">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">订单状态</label>
                        <div class="col-sm-10">
                            <input type="radio" name="orderCondition"  id="orderCondition1" value="0">未支付
                            <input type="radio" name="orderCondition"  id="orderCondition2" value="1">已支付
                            <input type="radio" name="orderCondition"  id="orderCondition3" value="2">关闭
                            <input type="radio" name="orderCondition"  id="orderCondition4" value="3">完成
                            <input type="radio" name="orderCondition"  id="orderCondition5" value="4">退款中
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 条查
上架时间
<input type="date" class="form-control" id="orderStartTime" >
<input type="date" class="form-control" id="orderEndTime" >
<button class="btn btn-success" onclick="searchProduct()">查询</button>-->
<table id="allOrders"></table>
</body>
<script>
    $(function(){
        allOrders();
    })
    function allOrders() {
        $('#allOrders').bootstrapTable({
            url: '../orders/allOrders',
            columns: [ {field: 'orderNum', title: '支付宝交易号'},
                {field: 'shopCount', title: '数量'},
                {field: 'shopTotal', title: '总价'},
                {field: 'realityShopTotal', title: '实际总价格'},
                {field: 'buyUserName', title: '用户名'},
                {field: 'contacts', title: '观演人'},
                {field: 'papersType', title: '观演人证件类型'},
                {field: 'papersNumber', title: '观演人证件号'},
                {field: 'orderDate', title: '下单时间'},
                {field: 'orderCondition', title: '订单状态',
                    formatter: function (value, row, index) {
                        if (row.orderCondition == 0) {
                            return "未支付";
                        } else if (row.orderCondition == 1) {
                            return "已支付";
                        } else if (row.orderCondition == 2) {
                            return "关闭";
                        } else if (row.orderCondition == 3) {
                            return "完成";
                        } else if (row.orderCondition == 4) {
                            return "退款";
                        }
                    }
                },{
                    field: 'caozuo', title: '操作',
                    formatter: function (value, row, index) {
                        var str="";
                        str='<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" onclick="orderQuery(\''+row.id+'\')">详细</button>'
                        return str;
                    }
                },
            ],
            pagination: true,
            pageSize: 2,
            pageList: [2, 4, 6, 8, 10],
            sidePagination: 'client',//server:服务器端分页{rows:[],total:10}|client：前端分页 [{},{}]
        })
    }
   /* //条查
    function searchProduct(){
        $("#allOrders").bootstrapTable("refresh",{
            "query":{
                "orderStartTime":$("#orderStartTime").val(),
                "orderEndTime":$("#orderEndTime").val(),
            }
        })
    }
*/
    function orderQuery(id){
      /*  alert(id)*/
         console.log(id);
        $.ajax({
            url:"/orders/orderQuery",
            data:{id:id},
            success:function(data){
                for(var i in data){
                    //		console.log(i);
                    $("#myForm input").each(function(index,dom){
                        if (i==$(dom).attr("name")) {
                            $(dom).val(data[i])
                        }
                    })
                }
                if (data.orderCondition==0) {
                    $("#orderCondition1").prop("checked",true);
                }else if(data.orderCondition==1){
                    $("#orderCondition2").prop("checked",true);
                }else if(data.orderCondition==2){
                    $("#orderCondition3").prop("checked",true);
                }else if(data.orderCondition==3){
                    $("#orderCondition4").prop("checked",true);
                }else if(data.orderCondition==4){
                    $("#orderCondition5").prop("checked",true);
                }
            }
        })
    }

</script>
</html>